<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>注册模块</h1>
  手机号：<input type="text" id="phone">
  <br>
  密码：<input type="text" id="password">
  <br>
  <button id="regBtn">注册</button>

  <script>

    //  请求地址：  http://127.0.0.1:3000/user/reg
    //  请求方式    post
    //  发送数据
    //          phone 手机号
    //          pass   密码
    //  返回数据
    //         object    success  注册成功
    //                   err      错误原因
    var regBtn = document.getElementById("regBtn");
    var phone = document.getElementById("phone");
    var password = document.getElementById("password");
    regBtn.onclick = function () {
      var phoneVal = phone.value;//手机号的值
      var passVal = password.value;//密码的值
      //1 创建对象
      var xhr = new XMLHttpRequest();
      // 2.调用open()
      xhr.open("post", "http://127.0.0.1:3000/user/reg", true)
      // 3.调用send()
      // 原生ajax的post传参 在send方法中传递
      // post传参之前提前设置请求头
      // 1. "name=1&age=2"  表单类型的请求头
      xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
      // // 2.{name:1,age:2}  设置json类型的请求头
      // xhr.setRequestHeader("content-type", "application/json")
      // // 3.上传的数据包  上传数据包类型的请求头
      // xhr.setRequestHeader("content-type", "multipart/form-data")
      xhr.send(`phone=${phoneVal}&pass=${passVal}`)

      // 4,等待数据返回
      xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
          var res = JSON.parse(xhr.responseText)
          console.log(res)
        }
      }
    }
  </script>
</body>

</html>